<template>
  <div>
    <!-- 分类文章柱状图 -->
    <div id="categoryArticle" style="width: 700px; height: 700px"></div>
    <!-- 标签文章柱状图 -->
    <div id="tagArticle" style="width: 700px; height: 700px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import ArticleAPI from "@/api/system/article.api";

const cartgoryArticleData = ref<{ value: number; name: string }[]>([]);
const tagArticleData = ref<{ value: number; name: string }[]>([]);

onMounted(() => {
  getCategoryArticleData().then(() => {
    initCategoryArticleEcharts(cartgoryArticleData.value);
  });
  getTagArticleData().then(() => {
    initTagArticleEcharts(tagArticleData.value);
  });
});

// 初始化分类文章柱状图
const initCategoryArticleEcharts = (data: { value: number; name: string }[]) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("categoryArticle"));
  if (!myChart) return;
  // 指定图表的配置项和数据
  const option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 250],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: data,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

// 初始化标签文章柱状图
const initTagArticleEcharts = (data: { value: number; name: string }[]) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("tagArticle"));
  if (!myChart) return;
  // 指定图表的配置项和数据
  const option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 250],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: data,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};

// 获取分类文章数据
const getCategoryArticleData = async () => {
  let result = await ArticleAPI.getCategoryArticle();

  result.forEach((item: any) => {
    cartgoryArticleData.value.push({ value: item.count, name: item.category_name });
  });
};

// 获取标签文章数据
const getTagArticleData = async () => {
  let result = await ArticleAPI.getTagArticle();
  tagArticleData.value = result;
};
</script>

<style scoped></style>
